<template>
  <el-form ref="generalForm"
      :model="formObject"
      :rules="rules"
      :label-width="labelWidth"
      :inline="inline"
      :label-position="labelPosition"
       @submit.native.prevent>
    <component
      v-for="(item,index) in formItemOption"
      :key="index"
      v-bind="item"
      :is="item.type"
      :clearFla="clearFla"
      @valueChangeEvent="valueChange"
    >
    </component>
<!--    留作按钮类的插槽-->
    <slot></slot>
  </el-form>
</template>

<script>
// 加载所有./ItemComponent下组件
let compos = {}
const modules = require.context('./ItemComponent', false, /.vue$/)
for (let item of modules.keys()) {
  compos[item.match(/.*\.\/(.*).vue$/)[1]] = modules(item).default
}

export default {
  name: "GeneralForm",
  props: {
    // 表单数据
    formObject: {
      type: Object
    },
    // 表单验证规则
    rules: {
      type: Object,
      default() {
        return {}
      }
    },
    // label标签宽度
    labelWidth: {
      type: String,
      default() {
        return '80px';
      }
    },
    // 是否一行显示
    inline: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 对齐方式
    labelPosition: {
      type: String,
      default() {
        return 'top'
      }
    },
    // forItems数据
    formItemOption: {
      type: Array,
      default() {
        return []
      }
    },
    // 默认不填入数据的prop
    isNull: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 表单清空触发标志
      clearFla: true
    }
  },
  components: {
    ...compos
  },
  methods: {
    // 数据发生改变
    valueChange(prop,value) {
      this.formObject[prop] = value
    },
    // 清空数据
    clearData() {
      this.clearForm()
      this.$nextTick(() => {
        this.clearCheck()
      })
    },
    // 将formData的数据设置到子组件中
    setData(numFla=false) {
      for (let item of this.$refs.generalForm.$children) {
        // 使用事件形式
        if (numFla && this.isNull.includes(item.prop))this.formObject[item.prop] = ''
        item.$emit('setValue', item.prop, this.formObject[item.prop])
      }
    },
    // 添加表单数据(不能改变自身，不然会进入死循环)
    addFormData(data) {
      let map = new Map()
      for (let key in data) {
        map.set(key+'',data[key])
      }
      for (let item of this.$refs.generalForm.$children) {
          if (map.has(item.prop)) {
            item.$emit('setValue', item.prop, map.get(item.prop))
          }
      }
    },
    // 清除验证信息
    clearCheck() {
      this.$refs.generalForm.clearValidate()
    },
    // 重置表单对象
    clearForm() {
      this.clearFla = !this.clearFla
    },
    // 验证表单是否通过
    getValidate(callback) {
      return this.$refs.generalForm.validate(callback)
    },
    // 获取表单数据
    getFormData() {
      return {...this.formObject}
    },

    // 分发任务到formItem
    distributeTask(prop,fuc,...arg) {
      for (let item of this.$refs.generalForm.$children) {
        if (prop == item.$props.prop) {
          fuc.apply(item,arg)
        }
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
